<template>
  <div id="cpyDetail" class="cpyDetailclass" >
    <div id="cpyphoto" class="cpyphotoclass">
      <img id="suping" class="fimg" src="../assets/banner.jpg" >
    </div>
    <div >
      <p class="supplierparmer">企业介绍</p>
      <ul style="width:90%;text-align: left;margin:0 auto" >
        <li class="ptlist graybg"  >
          <p class="fparamname" >企业名称</p>
          <p class="fparamvalue" >{{map.name}}</p>
        </li>
      </ul>
      <ul class="productparam" v-if="map.paramslist" >
        <li class="ptlist" v-for="(item,index) in map.paramslist"  @click="selectparm(item)" v-bind:class="{ graybg: index % 2 != 0}" :key='index'>
          <p class="fparamname" >{{item.fname}}</p>
          <p class="fparamvalue" >{{item.fvalue}}<img src="../assets/phone.png"  v-if="item.type == 'phone'" ><img src="../assets/1_0006_位置.png.png" height="32" width="32"  v-if="item.type == 'address'" ></p>
        </li>
      </ul>
      <p v-else  class="nodata">暂无数据</p>
    </div>

    <div>
      <p class="supplierremark">企业详情</p>
        <div v-if="alldata">
          <div style="height:300px;" v-if="supplierresourceslength != 0">
            <mt-swipe :auto="0" @change="handleChange"  style="height:300px;">
              <mt-swipe-item v-for="(item,index) in map.supplierresources" :key="index">
                <img :src="item.fscreenshoturl" style="width: 100%;height:300px" @click="opendetail(item,$event)" >
                <p class="fclassname" >{{item.fclassname}}</p>
              </mt-swipe-item>
            </mt-swipe>
          </div>
          <div style="height:0px;width:96%;margin:20px auto;border: 0.5px solid #DEDEDE;" v-if="isline"></div>
          <p class="fremark" v-html="map.remark" v-if="map.remark"></p>
        </div>
        <p v-else  class="nodata">暂无数据</p>
    </div>

    <div id="ptsearch" class="ptsearchclass" >
      <p class="itemname_supplier " >商品中心</p>
      <div  class="search">
        <input class="inputsearch" v-model='inputvalue' type="text" placeholder="请输入商品关键字" />
        <div class="btnsearch "  @click="search" >搜索</div>
      </div>
    </div>

    <div id="ptlist" class="ptlistclass" >
      <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false" :bottomDistance="10">
        <div v-for="(item,index) in list" @click="gotoproduct(item)" class="ptlist_div" :key='index'>
          <img :src="item.fproductphoto"  height="170px" width="100%">
          <p class="ptname">{{item.fname}}</p>
        </div>
        <span v-show="nomoredata" class="nomore">没有更多数据了</span>
      </mt-loadmore>
    </div>
    <div class="nodata">
      <p class="nodatatips" style="text-align: center;" v-show="isshow">暂无相关数据</p>
    </div>

    <div class="mapshow" v-show="dialogformap">
      <div class="dialogtop">
        <p class="maplabel">地图</p>
        <button class="closedialog" @click="closemap" type="default">关闭</button>
      </div>
      <div id="mapdetail" class="mapdetailclass">
        <!--地图容器-->
        <div id="allmap"></div>
      </div>
    </div>
    <div class="shadow" v-show="dialogformap" @click="closemap">
    </div>
  </div>
</template>

<script>
import api from '../service/fetchservice'
  export default {

    data(){
      return {
        activeNames:[],
        fid:'',
        nomoredata:false,
        isshow:false,
        inputvalue:'',
        tel:'tel:',
        pagenum:1,
        map:{},
        list:[],
        allLoaded:false,
        dialogformap:false,
        coordinatedata:'',
        newmap:'',
        supBannerImg:0,
        scrollMode:"auto",
        supplierresourceslength :0,
        alldata:true,
        videosrc:'',
        isVodeo:false,
        isline:true
      }
    },

    methods:{
      handleChange(index){

      },
      closemap() {
        this.dialogformap = false;
      },

      opendetail(item,e){
        if(item.ftype == 'img'){
          //this.$router.push({path:'/report',query:{type:item.ftype,furl:item.fscreenshoturl}});
        }
        else if(item.ftype == 'video'){
          //this.$router.push({path:'/report',query:{type:item.ftype,furl:item.furl}});
        }
      },

      getnewmap(longitude,latitude, name) {
        this.newmap = new BMap.Map("allmap");
        var point = new BMap.Point(longitude,latitude);
        this.newmap.centerAndZoom(point, 15);
        this.newmap.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        this.newmap.setCurrentCity("银川");          // 设置地图显示的城市 此项是必须设置的
        this.newmap.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        var marker = new BMap.Marker(point);  // 创建标注
        this.newmap.addOverlay(marker);              // 将标注添加到地图中
        var label = new BMap.Label(name,{offset:new BMap.Size(-120,-25)});
        label.setStyle({
          "font-size":"15px",
          "display":"block",
          // "width":"120px",
          "word-wrap":"break-word",
          "word-break":"break-all",
          "textAlign":"center",            //文字水平居中显示

        })
        marker.setLabel(label);
        this.add_control(this.newmap);
        this.add_location(this.newmap);
        var aaa = this;
        var loadCount = 1;
        this.newmap.addEventListener("tilesloaded",function(){
          if(loadCount == 1){
            aaa.newmap.centerAndZoom(point, 15);
          }
          loadCount = loadCount + 1;


         });
      },
      gotoproduct(item) {
        //this.$router.push({path:'/productinfo',query:{fid:item.fid}});
      },
      selectparm(item) {

        var type = item.type;
        if (type == 'text') {
          // alert(type);
        }
        if (type == 'phone') {
          window.location.href =  'tel:' + item.typevalue;
        }
        if (type == 'address') {

          this.coordinatedata = item.typevalue;
          var longitude = this.coordinatedata.split(',')[0];
          var latitude = this.coordinatedata.split(',')[1];
          this.getnewmap(parseFloat(longitude), parseFloat(latitude),item.fvalue);

          this.dialogformap = true;
        }
      },
      search() {
        this.nomoredata = false;
        this.nodatatips = false;
        this.allLoaded = false;// 若数据已全部获取完毕
        this.pagenum = 1;
        var fid = this.$route.query.fid;
        api.api('/mockdata/index',{
          supplierid:fid,
          pagenum:'1',
          pagesize:'6',
          searchname:this.inputvalue,
        }).then(res => {
          console.log(res)
          let datadic = res.articles
          if (datadic.isSuccess == true) {
            if (datadic.map != null) {
              this.map = datadic.map;
              this.list = datadic.map.productpage.results;
              this.isshowtips(this.list);
            }
          } else {
            mesasgebox('请求失败')
          }
        })

      },
      isshowtips(list) {
        if (list.length == 0) {
          this.nomoredata = false;
          this.isshow = true;
        } else {
          this.isshow = false;
        }
      },

      getNaturalWidth(img) {
        var image = new Image()
        image.src = img
        var naturalWidth = image.width
        return naturalWidth
      },
      getNaturalHeight(img) {
        var image = new Image()
        image.src = img
        var naturalHeight = image.height
        return naturalHeight
      },

      loadBottom() {
        // 加载更多数据
        this.pagenum = parseInt(this.pagenum) +1;
        this.loadmoredata(this.pagenum)
        this.$refs.loadmore.onBottomLoaded();
      },



      loadmoredata(num) {
        var fid = this.$route.query.fid;
         api.api('/mockdata/index',{
          supplierid:fid,
          pagenum:num,
          pagesize:6,
          searchname:this.inputvalue,
        }).then(res => {
          let datadic = res.articles
          if (datadic.isSuccess == true) {
            if (datadic.map != null) {
              if (parseInt(this.pagenum - 1) * 6 > parseInt(datadic.map.productpage.totalCount)) {
                this.allLoaded = true;// 若数据已全部获取完毕
                this.$refs.loadmore.onBottomLoaded();
                this.nomoredata = true;
                this.scrollMode = "touch";
              } else {
                this.list = this.list.concat(datadic.map.productpage.results);
                this.nomoredata = false;
              }
            }
          } else {
            mesasgebox('请求失败')
          }
        })
        this.$refs.loadmore.onBottomLoaded();
      },
      add_control(map) {
        var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
        map.addControl(top_left_control);

      },
      add_location(map) {
        // 添加带有定位的导航控件
        var navigationControl = new BMap.NavigationControl({
          // 靠左上角位置
          anchor: BMAP_ANCHOR_TOP_LEFT,
          // LARGE类型
          type: BMAP_NAVIGATION_CONTROL_LARGE,
          // 启用显示定位
          enableGeolocation: true,
        });
        map.addControl(navigationControl);
        // 添加定位控件
        var geolocationControl = new BMap.GeolocationControl();
        geolocationControl.addEventListener("locationSuccess", function(e){
          // 定位成功事件
          var address = '';
          address += e.addressComponent.province;
          address += e.addressComponent.city;
          address += e.addressComponent.district;
          address += e.addressComponent.street;
          address += e.addressComponent.streetNumber;
          alert("当前定位地址为：" + address);
        });
        geolocationControl.addEventListener("locationError",function(e){
          // 定位失败事件
          alert(e.message);
        });
        // map.addControl(geolocationControl);
      }
    },


    mounted() {

      var fid = this.$route.query.fid;
      console.log(fid)
       api.api('/mockdata/index',{
        supplierid:fid,
        pagenum:this.pagenum,
        pagesize:'6',
        searchname:'',
      }).then(res => {
          let datadic = res.articles
          console.log(datadic)
        if (datadic.isSuccess == true) {
          if (datadic.map != null) {
            this.map = datadic.map;
            console.log(this.map)
            document.title = this.map.name +'详情'
            this.supplierresourceslength = this.map.supplierresources.length
            if(this.supplierresourceslength == 0 && this.map.remark == ''){
                this.alldata = false
            }
            if(this.supplierresourceslength == 0 || this.map.remark == ''){
                this.isline = false
            }
            this.list = datadic.map.productpage.results;
              if (this.pagenum  * 6 >= parseInt(datadic.map.productpage.totalCount)) {
                this.allLoaded = true;
              }
            this.isshowtips(this.list);
          }
        } else if(datadic.isSuccess == false){
        }else {
        }
          loadmessage()
      }).catch(erro =>{
      })
    },
  }
</script>

<style  slot-scope>

  .fclassname{
      z-index:10;
      text-align:center;
      position:absolute;
      top:10px;
      left:10px;
      background: rgba(0,0,0,0.5);
      padding:4px;
      border-radius: 5px;
      color: white
  }
  .fname{
    text-align: center;
    line-height: 40px;
    border-bottom:1px solid #E6EBF5;
  }

  .btnsearch{
    background-color: #409EFF;
    color:white;
    font-size: 16px
  }
  #suping{
    width:100%;
    height:250px;
  }
  .itemname_supplier{
    margin-bottom:10px;
    text-align: left;
    line-height: 48px;
    padding-left:40px;
    font-weight: 700;
  }
  .fparamvalue img{
    width:20px;
    height:20px;
    margin-left: 10px;
  }
  .productparam{
    width:90%;
    margin:0 auto;

  }
  .productname{
    margin-right: 10px;
  }
  .cpyparamclass{
    font-size: 15px;
  }
  .ptlistclass{
    text-align: left;
    height:510px;
    overflow: scroll;
    -webkit-overflow-scrolling:touch
  }
  .ptlist{
    display: flex;
  }
  .ptname{
    line-height: 30px;
    text-align: center;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .cpyDetailclass{
    text-align: left;
  }
  img{
    vertical-align:bottom;
  }

  .fparamname{
    width:40%;
    padding:5px;
  }
  .fparamvalue{
    width:60%;
    padding:5px;
    text-align: left;
  }

  .fremark{
    width: 98%;
    overflow-x: hidden;
    margin:0 auto;
  }
  .fremark img{
    width:90%!important;;
    margin:0 auto!important;
  }
  #ptsearch .itemname_supplier{
    border-bottom: 1px solid #DEDEDE;
  }
  .search{
    margin:0 auto;
    width:96%;
    display: flex;
  }
  .inputsearch{
    width:70%;
    height:30px;
    -webkit-appearance: none;
    line-height: 30px;
    border-radius: 0;
     border: none;
     vertical-align:middle;
     display:inline-block;

  }
  .btnsearch{
    width:25%;
    height:34px;
    line-height: 34px;
    -webkit-appearance: none;
    border: none;
    text-align: center;
    vertical-align: top;
    display:inline-block;
    margin-left:2%;


  }
  .ptlist_div{
    width:45%;
    height:200px;
    display: inline-block;
    margin:2%;
    border:1px solid #DEDEDE;
  }

  .title{
    background: #DCDCDC;
    height:40px;
    line-height: 40px;
    padding-left:10px;
    color: #2c3e50;
    text-align: left;
    display: flex;
    justify-content: space-between
  }
  .graybg{
    background: #E9E9E9;
  }

  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    padding-left:10px;
    font-size: 16px;
    line-height: 30px;
  }
  input:-moz-placeholder, textarea:-moz-placeholder {
    padding-left:10px;
    font-size: 16px;
    line-height: 30px;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    padding-left:10px;
    font-size: 16px;
    line-height: 30px;
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    padding-left:10px;
    font-size: 16px;
    line-height: 30px;
  }
  .nomore{
    text-align: center;
    display: inline-block;
    width:100%;
    line-height: 30px;
  }
  .el-collapse-item__header{
    text-align: left;
    padding-left:40px;
    font-size: 16px;
    font-weight: 700;

  }
  .supplierparmer{
    background: url("../assets/info.png") no-repeat;
    background-size: 25px 25px;
    background-position: 12px 10px ;
    border-left: 6px solid #409EFF;
    background-color: white;
    margin-bottom:10px;
    text-align: left;
    line-height: 48px;
    padding-left:40px;
    font-weight: 700;
  }
  .supplierremark{
    background: url("../assets/suppliser.png") no-repeat;
    background-size: 25px 25px;
    background-position: 12px 10px ;
    border-left: 6px solid #409EFF;
    background-color: white;
    margin-bottom:10px;
    text-align: left;
    line-height: 48px;
    padding-left:40px;
    font-weight: 700;
  }
  #ptsearch .itemname_supplier{
    background: url("../assets/prudoctbg.png") no-repeat;
    background-size: 25px 25px;
    background-position: 12px 10px ;
    border-left: 6px solid #409EFF;
    background-color: white;
  }
  .mapshow {
    position: fixed;
    top: 10%;
    left: 10%;
    text-align: center;
    width: 80%;
    height: 400px;
    background: white;
    z-index:100
  }
  .maplabel {
    width: 90%;
    font-size: 20px;
    padding: 10px 0 0 0;

    color: white;
    height: 40px;
    margin: 0px;

  }
  .dialogtop {
    display: flex;
    background: #20a0ff;
  }
  .shadow{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    background:rgba(0,0,0,0.5);

  }
  #allmap{
    width: 100%;height:350px;margin:0 auto;font-family:'微软雅黑';
  }
  .nodata{
    text-align: center;
    line-height: 40px;
  }
  .closedialog {
    width: 30%;
    font-size: 17px;
    height: 50px;
    border-radius: 0;
    -webkit-appearance: none;
    color: black;
    background:white;
    border:none;
  }
</style>
